<template>
  <div class="hp-timeout">
    <div class="timeout_img">
      <van-empty :image="noRecord" :description="errorMsg" />
    </div>
    <div class="timeout_operation">
      <van-button type="default" @click="reLogin()">重新登录</van-button>
    </div>
    <div class="timeout_info">
      <ul>
        <li>
          <i class="title-dot"></i>
          <p class="title">可能原因:</p>
          <p class>当前网络环境不稳定或网络连接发生了变化</p>
        </li>
        <li>
          <i class="title-dot"></i>
          <p class="title">解决办法:</p>
          <p class>1. 尝试切换网络,如蜂窝网络切换为WiFi,或者由WiFi切换为蜂窝网络</p>
          <p class>2. 回到首页尝试重新登录</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {logout} from "@/utils/login";

const noRecord = require('@/assets/img/empty/noRecord.png')
// token会话过期或者会话超时的错误页面
export default {
  name: 'timeOut',
  data () {
    return {
      noRecord: noRecord,
      errorMsg: this.$route.query.errMsg || '会话已失效',
      redirect: this.$route.query.redirect || '/',
      fromAuth: this.$route.query.fromAuth || 'false',
      QRCodeFlag: ''
    };
  },
  methods: {
    reLogin () {
     logout()
    }
  },
  mounted () {
  }
};
</script>

<style lang="scss" scoped>
::v-deep .van-empty__description {
  padding: 0px 0px;
}
.hp-timeout {
  // position: absolute;
  // top:0;
  // bottom: 0;
  // left: 0;
  // right: 0;
  // background: #ffffff;
  .timeout_img {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-160px);
  }

  .timeout_operation {
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translateX(-145px);
  }

  .timeout_info {
    position: absolute;
    top: 740px;
    color: #999999;
    // margin: 80px 10px 0px 10px;
    p.content {
      text-indent: 1em;
    }
    p.title {
      position: relative;
    }
    .title-dot{
      position: relative;
      &::before {
        content: " ";
        width: 7px;
        height: 7px;
        background: #333333;
        position: absolute;
        border-radius: 50%;
        left: -13px;
        top: 6px;
      }
    }
    ul li {
      padding-left: 80px;
      padding-right: 30px;
    }
  }
  ::v-deep .van-empty__description {
    width: 320px;
    text-align: center;
  }
}
</style>
